<template>
  <view class="login-page">
    <!-- 顶部logo -->
    <view class="logo-container">
      <image class="logo" src="/static/logo.png" mode="aspectFit" />
      <text class="slogan">欢迎回到商城</text>
    </view>

    <!-- 登录表单 -->
    <AuthForm
      :form-items="formItems"
      :submit-text="'立即登录'"
      :nav-text="'没有账号？立即注册'"
      @submit="handleLogin"
      @navigate="handleNavigate"
    >
      <template #extra>
        <view class="form-extra">
          <view class="remember-me">
            <checkbox-group @change="handleRememberChange">
              <label>
                <checkbox
                  value="remember"
                  :checked="remember"
                  color="#FF80C0"
                />
                <text>记住我</text>
              </label>
            </checkbox-group>
          </view>
          <view class="forgot-password">
            <text @click="navigateToForgot">忘记密码？</text>
          </view>
        </view>
      </template>
    </AuthForm>

    <!-- 其他登录方式 -->
    <view class="other-login">
      <view class="divider">
        <view class="line"></view>
        <text class="text">快速登录</text>
        <view class="line"></view>
      </view>
      <view class="login-methods">
        <button
          class="method-btn"
          open-type="getPhoneNumber"
          @getphonenumber="onWechatLogin"
        >
          <uni-icons type="weixin" size="50" color="#09BB07"></uni-icons>
          <text>微信登录</text>
        </button>
        <button class="method-btn" @click="handleSmsLogin">
          <uni-icons type="chat" size="50" color="#FF80C0"></uni-icons>
          <text>短信验证码</text>
        </button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import AuthForm from "./components/AuthForm.vue";
import { saveUser } from "@/utils/userStorage";

const remember = ref(false);

// 表单配置
const formItems = ref([
  {
    type: "text",
    name: "account",
    label: "账号",
    placeholder: "请输入手机号/用户名",
    value: "",
    rules: [{ required: true, message: "请输入账号" }],
  },
  {
    type: "password",
    name: "password",
    label: "密码",
    placeholder: "请输入密码",
    value: "",
    rules: [
      { required: true, message: "请输入密码" },
      { min: 6, max: 20, message: "密码长度6-20位" },
    ],
  },
]);

// 初始化时读取记住的账号
onMounted(() => {
  const savedAccount = uni.getStorageSync("remember_account");
  if (savedAccount) {
    formItems.value[0].value = savedAccount;
    remember.value = true;
  }
});

// 记住我状态变化
function handleRememberChange(e) {
  remember.value = e.detail.value.includes("remember");
}

// 提交登录
function handleLogin(formData) {
  uni.showLoading({ title: "登录中..." });

  // 模拟登录请求
  setTimeout(() => {
    // 记住账号处理
    if (remember.value) {
      uni.setStorageSync("remember_account", formData.account);
    } else {
      uni.removeStorageSync("remember_account");
    }

    // 模拟登录成功
    const userInfo = {
      id: 1,
      name: "用户",
      token: "mock_token_" + Date.now(),
    };

  // 保存用户信息到缓存
    if (saveUser(userInfo)) {
      uni.hideLoading();
      uni.showToast({
        title: '登录成功',
        icon: 'success'
      });
      
      // 跳转到首页
      setTimeout(() => {
        uni.switchTab({
          url: '/pages/index/index'
        });
      }, 1500);
    } else {
      uni.hideLoading();
      uni.showToast({
        title: '登录失败，请重试',
        icon: 'none'
      });
    }

    // 跳转到首页
    setTimeout(() => {
      uni.switchTab({
        url: "/pages/index/index",
      });
    }, 1500);
  }, 1500);
}

// 导航到注册
function handleNavigate() {
  uni.navigateTo({
    url: "/pages/login/register",
  });
}

// 忘记密码
function navigateToForgot() {
  uni.navigateTo({
    url: "/pages/login/forgot",
  });
}

// 微信登录
function onWechatLogin(e) {
  console.log("微信登录数据:", e.detail);
  // 实际项目中这里调用微信登录API
}

// 短信验证码登录
function handleSmsLogin() {
  uni.navigateTo({
    url: "/pages/login/sms-login",
  });
}
</script>

<style lang="scss" scoped>
.login-page {
  padding: 60rpx 50rpx;
  min-height: 100vh;
  background-color: $white-bg;

  .logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 60rpx;

    .logo {
      width: 150rpx;
      height: 150rpx;
      margin-bottom: 20rpx;
    }

    .slogan {
      font-size: $font-size-32rpx;
      color: $text-color;
    }
  }

  .form-extra {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20rpx 0 40rpx;

    .remember-me {
      display: flex;
      align-items: center;

      text {
        font-size: $font-size-24rpx;
        color: $text-color-666;
        margin-left: 10rpx;
      }
    }

    .forgot-password {
      text {
        font-size: $font-size-24rpx;
        color: $primary-color;
      }
    }
  }

  .other-login {
    margin-top: 80rpx;

    .divider {
      display: flex;
      align-items: center;
      margin-bottom: 40rpx;

      .line {
        flex: 1;
        height: 1rpx;
        background-color: #eee;
      }

      .text {
        padding: 0 20rpx;
        font-size: $font-size-26rpx;
        color: $text-color-666;
      }
    }

    .login-methods {
      display: flex;
      justify-content: center;
      gap: 80rpx;

      .method-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        background: none;
        border: none;
        padding: 0;

        &::after {
          border: none;
        }

        text {
          font-size: $font-size-24rpx;
          color: $text-color-666;
          margin-top: 10rpx;
        }
      }
    }
  }
}
</style>
